<template>
	<view class="content">
		<view class="header">
			<view class="mohu" v-show="ViewKou>=30">
				
			</view>
			<view class="zhanwei">
			</view>
			<view class="biao_ti">
				<view class="top-text" @click="Fanhui()"><image src="../static/image/baise.png" mode="scaleToFill"></image></view>
				<text></text>
			</view>
		</view>
		<swiper class="swiper" :duration="duration" :vertical="true" @change="yidong">
			<swiper-item v-for="(item,index) in Kanlist" :key="index">
				<view class="swiper-item uni-bg-red">
					
					<image style="background-color: #c7dbff;" :src="item.image" mode="aspectFit"></image>
					<view class="gongneng">
						<view class="gong-kuang" @click="shoucang()">
							<image src="../static/image/dss.png" mode="scaleToFill"></image>
							<!-- <image src="../static/image/ds.png" mode="scaleToFill"></image> -->
						</view>
						<view class="gong-kuang" @click="xiazai(item)">
							<image src="../static/image/dx.png" mode="scaleToFill"></image>
						</view>
						<button class="gong-kuang" style="margin-top: -10rpx; background: none;" open-type="share">
							<image src="../static/image/dr.png" mode="scaleToFill"></image>
						</button>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import W_request from '@/utis/api.js'
	export default {
		data() {
			return {
				duration:300,
				Kanlist:[],
				current:0,//当前显示的下表
				ImgId:0,//用户点进来时的下表
				four:0,//海林要系列时的判断
				fenleiid:0//海林要系列里的分类id
			}
		},
		onLoad(e) {
			console.log(e);
			this.ImgId = e.id;
			this.four = e.four;
			this.fenleiid = e.fenleiid;
			this.qingqiu();
		},
		
		//分享
		onShareAppMessage(res) {
			
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '荟漫图坊',
		      path: '/chaKan/FangDa',
			  imageUrl:this.Kanlist[0].image,
			  
		    }
		},
		methods: {
			//请求
			qingqiu(){
				W_request({
					url:'api/index/flash',
					data:{
						imageid:this.ImgId,
						four:this.four,
						sortid:this.fenleiid,
						// five:50505,
						
					}
				}).then(res=>{
					console.log(res)
					this.Kanlist = res.data.data
				},err=>{
					console.log(err)
				});
			},
			
			//滚动到底部时触发
			yidong(event) {
				console.log(event.detail.current);
				console.log(this.four)
				if(event.detail.current >= this.Kanlist.length-1 && this.four===undefined){
					console.log("超出了");
					console.log(this.Kanlist.length-1,event.detail.current);
					W_request({
						url:'api/index/flash',
						data:{
							imageid:this.Kanlist[event.detail.current].id,
						}
					}).then(res=>{
						for (var i = 0; i <res.data.data.length; i++) {
							this.Kanlist.push(res.data.data[i]);
							console.log(this.Kanlist);
						}
					},err=>{
						console.log(err);
					});
				}else{
					console.log("你是系列的！");
				}
			},
			//返回
			Fanhui(){
				uni.navigateBack({
					delta:1
				})
			},
			//收藏
			shoucang(){
				
			},
			//下载
			xiazai(item){
				uni.showModal({
					title: '提示',
					content: '确定保存到相册吗',
					success: res => {
						console.log("进入弹窗")
						if (res.confirm) {
							uni.downloadFile({
								url:item.image, //图片地址
								success: res => {
									if (res.statusCode === 200) {
										console.log("进入下载地址")
										uni.saveImageToPhotosAlbum({
											filePath: res.tempFilePath,
											success: function() {
												uni.showToast({
													title: '保存成功到相册',
													icon: 'none'
												});
												console.log("保存成功")
											},
											fail: function() {
												uni.showToast({
													title: '保存失败',
													icon: 'none'
												});
												console.log("保存失败")
											}
										});
									}
								}
							});
						} else if (res.cancel) {
							
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		height: 100vh;
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		position: relative;
		.mohu{
			width: 100%;
			height: 100%;
			backdrop-filter: blur(5px);
			background-color: rgba(255, 255, 255, 0.1); /* 透明度为50%的白色背景 */
			position: absolute;
			z-index: 1;
		}
		.header{
			width: 100%;
			height:150rpx;
			// background-color: rgb(19, 20, 22);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: fixed;
			top: 0;
			z-index: 100;
			padding-bottom: 20rpx;
			.zhanwei{
				width: 100%;
				height: 100rpx;
			}
			.biao_ti{
				width: 93%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				z-index: 50;
				.top-text{
					font-size: 40rpx;
					height: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 50rpx;
						height: 50rpx;
						transform: rotate(180deg);
					}
				}
				.sousuo{
					width: 350rpx;
					height: 70rpx;
					background-color: #1a1a1a;
					border-radius: 100rpx;
					display: flex;
					align-items: center;
					position: relative;
					font-size: 26rpx;
					color: #e2e2e2;	
					margin-left: 30rpx;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
						margin-right: 15rpx;
					}
				}
			}
			
		}
		.swiper {
			width: 100%;
			height: 100%;
			background-color: #fff;
			swiper-item{
				width: 100%;
				height: 100%;
				
			}
			.swiper-item{
				width: 100%;
				height: 100%;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.gongneng{
					position: absolute;
					width: 100rpx;
					overflow: hidden;
					// background-color: #1a1a1a;
					right: 25rpx;
					z-index: 100;
					bottom: 150rpx;
					display: flex;
						flex-direction: column;
						align-items: center;
						
					button::after { border: none }
					.gong-kuang{
						width: 80rpx;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						// margin-bottom: 20rpx;
						background-color: none !important;
						

						image{
							width: 70rpx;
							height: 70rpx;
							// box-shadow: 0 0 0 #1a1a1a;
						}
						text{
							font-size: 26rpx;
							margin-top: 10rpx;
							color:#fff
						}
					}
				}
			}
		}
	}
</style>